import React, { PureComponent } from "react";
import { Flex, Tabs ,Toast} from "antd-mobile";
import s from "./index.scss";
import AxFooter from "components/Footer";
import AxHeader from "components/AxHeader";
import Paging from "components/Paging";
import shibaiPng from "assets/images/shibai.png";

import {hashHistory}  from 'React-Router'
import { callApi } from "app/utils";

const tabs = [
  { title: '投标中', sub: '1' },
  { title: '回款中', sub: '2' },
  { title: '历史投资', sub: '3' }
];
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      //分页数据
      info: {},
      myinvestsParams:{
        token:JSON.parse(localStorage.getItem('userData')).token,
        state: 0,
        page: 1,
        pageSize: 5,
      },
      flag:true
    };
    this.itemStr = this.itemStr.bind(this)
    
  }
  
  componentDidMount() {
 
    this.requestList(this.state.myinvestsParams)
  }
//分页方法
  requestList(item){
    callApi('/account/myinvests',item,"POST").then((data)=>{
      if(data.success==true){
        this.setState({
          info:data.data
        })
      }
    })
  }
  handlePageFocus(e){
      this.setState({
        flag:false
      })
  }

  handlePage(e){
    if(e.target.value>this.state.info.pageCount){
      Toast.info('没有那么多页面',1)
    }else{
      this.state.myinvestsParams.page = e.target.value
      this.forceUpdate()
      this.requestList(this.state.myinvestsParams)
    }
    
    this.setState({
      flag:true
    })

  }

 
  pageBtn(opt){
    if(opt=='next'){
      if(this.state.info.pageCount<=this.state.myinvestsParams.page){
        Toast.info('没有下一页了',1)
        return false
      }else{
        let temp = ++(this.state.myinvestsParams.page)
       this.state.myinvestsParams.page = temp
      }
      
    }else if(opt=='prev'){
      if(this.state.myinvestsParams.page<=1){
        Toast.info('没有上一页了',1)
        return false
      }else{
        let temp = --(this.state.myinvestsParams.page)
        this.state.myinvestsParams.page =temp
      }
     
    }else if(opt=='first'){
      this.state.myinvestsParams.page = 1
    }else if(opt=='last'){
      this.state.myinvestsParams.page = this.state.info.pageCount
    }

    
    this.requestList(this.state.myinvestsParams)

  }

  //分页方法

  itemStr(item,index){
    let that = this
      if(JSON.stringify(item)!='{}'){
        let d = item
          return <Flex.Item key={index} className={`${s.listItem}`}>
          <Flex.Item className={`${s.title}`}>
                {d.title}
          </Flex.Item>
          <Flex.Item className={`${s.content}`}>
              <Flex.Item className={`${s.childItem}`}>
                    <Flex.Item className={`${s.left}`}>
                    <span className={`color26`}>￥{d.investAmount}</span>
                    </Flex.Item>
                    <Flex.Item className={`${s.right}`}>
                    <span className={`color26`}>{d.investTime}</span>
                    </Flex.Item>
              </Flex.Item>
              <Flex.Item className={`${s.childItem}`}>
                    <Flex.Item className={`${s.left}`}>
                    投资金额(元)
                    </Flex.Item>
                    <Flex.Item className={`${s.right}`}>
                    投资时间
                    </Flex.Item>
              </Flex.Item>
              <Flex.Item className={`${s.childItem}`}>
                    <Flex.Item className={`${s.left}`}>
                    <span className={`color26`}>{d.annualInterestRate}%</span>
                    </Flex.Item>
                    <Flex.Item className={`${s.right}`}>
                    <span className={`color26`}>{d.term}</span>
                    </Flex.Item>
              </Flex.Item>
              <Flex.Item className={`${s.childItem}`}>
                    <Flex.Item className={`${s.left}`}>
                    年化收益率
                    </Flex.Item>
                    <Flex.Item className={`${s.right}`}>
                    融资期限
                    </Flex.Item>
              </Flex.Item>
          </Flex.Item>
          <div className={`${s.block}`}></div>
        </Flex.Item>
      }
    
  }

  render() {
    let { info } = this.state;
    let listStr
    if(JSON.stringify(info)!='{}'){
      listStr = info.detail.map((item,index)=>{
        return this.itemStr(item,index)
      })
    }else{
      listStr = (
        <Flex className={`nullBox`} direction="column">
            <Flex.Item className={`nullItem flex8`}><img src={shibaiPng} /></Flex.Item>
            <Flex.Item className={`nullItem flex1`}>暂无投资记录</Flex.Item>
            <Flex.Item className={`nullItem flex1`}><div className={`btn`} onClick={()=>{
              hashHistory.push('/projectList')
            }}>去投资</div></Flex.Item>
        </Flex>
      )
      
    }
   
    
    return (
      <div className={`${s.investRecordBox}`}>
        <div  style={{height:'100vh',minHeight:'100vh',width:'100%',overflow:'auto'}}>
          <AxHeader />
          <Tabs
            tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => {
              console.log("onChange", index, tab);
              this.state.myinvestsParams.state = index
              this.state.myinvestsParams.page = 1
              this.requestList(this.state.myinvestsParams)
            }}
            onTabClick={(tab, index) => {
              console.log("onTabClick", index, tab);
              this.state.myinvestsParams.state = index
              this.state.myinvestsParams.page = 1
              this.requestList(this.state.myinvestsParams)
            }}
          >
            <div  style={{height:'auto',minHeight:'100vh',width:'100%',overflow:'auto'}}>
              <Flex className={`${s.listBox}`} direction="column">
                  {listStr}
              </Flex>
              <Paging 
                handlePage={this.handlePage.bind(this)} 
                myinvestsParams={this.state.myinvestsParams} 
                info={info}
                pageBtn={this.pageBtn.bind(this)}
                flag={this.state.flag}
                handlePageFocus={this.handlePageFocus.bind(this)}/>
            </div>
            <div >
              <Flex className={`${s.listBox}`} direction="column">
                  {listStr}
              </Flex>
              <Paging 
                handlePage={this.handlePage.bind(this)} 
                myinvestsParams={this.state.myinvestsParams} 
                info={info}
                pageBtn={this.pageBtn.bind(this)}
                flag={this.state.flag}
                handlePageFocus={this.handlePageFocus.bind(this)}/>
            </div>
            <div >
              <Flex className={`${s.listBox}`} direction="column">
                  {listStr}
              </Flex>
              <Paging 
                handlePage={this.handlePage.bind(this)} 
                myinvestsParams={this.state.myinvestsParams} 
                info={info}
                pageBtn={this.pageBtn.bind(this)}
                flag={this.state.flag}
                handlePageFocus={this.handlePageFocus.bind(this)}/>
            </div>
          </Tabs>
        </div>

      <AxFooter base={true}/>
      </div>
    );
  }
}
